<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="1000"
    @close="close"
  >
    <div class="transfer">
      <i-tree-transfer
        ref="tree"
        v-model="value"
        :data="allData"
        filterable
        :left_default_checked="checkedData"
        @change="handleChange"
      ></i-tree-transfer>
      <!-- <div>
        <p>v-model: {{ value }}</p>
      </div> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getAllPart, getBindData, getBindSingleData } from '@/api/tree'
  import ITreeTransfer from '@/components/ITreeTransfer'
  import { setMapTree } from '@/api/building'
  import _ from 'lodash'
  export default {
    name: 'SetMapTree',
    components: { ITreeTransfer },
    data() {
      return {
        //已添加功能树id数组
        checkedData: [],
        allData: [],
        value: [],
        data: [],
        title: '',
        dialogFormVisible: false,
        item: { estateType: 2 },
        bandedData: [],
      }
    },
    watch: {
      checkedData(val) {
        this.setCheckedKeys(checkedData)
      },
    },
    created() {
      this.fetchTree()
    },
    methods: {
      async save() {
        this.item.partIdList = this.value
        const { data } = await setMapTree(this.item)
        if (data.status == 0) {
          this.$baseMessage('添加成功', 'success')
          this.close()
        } else {
          this.$baseMessage(data.message, 'error')
        }
        this.value = []
      },
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes())
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys())
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes()
      },
      setCheckedKeys(array) {
        this.$refs.tree.setCheckedKeys(array)
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([])
      },
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys)
      },
      showEdit(row) {
        if (!row) {
          console.log('未选择对应row')
        } else {
          this.title = '绑定映射树'
          this.item.estateId = row
          this.fetchBindTree()
          this.transformData()
          //数据回显
        }
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
        this.value = []
      },
      async fetchTree() {
        const { data: res } = await getAllPart()
        this.data = res.body
      },
      async fetchBindTree() {
        let _push_form = {}
        // _push_form.parentId = '1'
        _push_form.estateId = this.item.estateId
        const { data } = await getBindSingleData(1)
        if (data.status === 0) {
          if (data.body.length == 0) {
            this.checkedData = []
            return
          }
          for (let index = 0; index < data.body.length; index++) {
            const element = data.body[index]
            if (element.partName == '公建芯造') {
              _push_form.parentId = element.partId
            }
          }
        } else {
          this.$baseMessage(data.message, 'error')
        }
        console.log(_push_form)
        const { data: res } = await getBindData(_push_form)
        if (res.status === 0) {
          if (res.body.length == 0) {
            this.checkedData = []
            return
          }
          let temp = []
          for (let index = 0; index < res.body.length; index++) {
            const element = res.body[index].partId
            temp.push(element)
          }
          this.checkedData = temp
        } else {
          this.$baseMessage(res.message, 'error')
        }
      },
      transformData() {
        let AllData = _.cloneDeep(this.data)
        let treeMapList = AllData.reduce((memo, current) => {
          memo[current['partId']] = current
          return memo
        }, {})
        let treeData = AllData.reduce((array, current) => {
          let parentId = current.parentId
          let partLevel = current.partLevel
          current.id = current.partId
          current.disabled = false
          current.key = current.partId
          current.label = current.partName
          let parent = treeMapList[parentId]
          if (partLevel == 1 && current.partName == '公建芯造') {
            //根元素
            array.push(current)
          } else if (parent) {
            parent.children
              ? parent.children.push(current)
              : (parent.children = [current])
          }
          return array
        }, [])
        this.allData = treeData
      },
    },
  }
</script>
<style lang="scss" scoped>
  .transfer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
